<template>
    <div class="pieCard">
        <div class="title">
            <div class="topline"></div>
            {{ title }}
        </div>
        <div>
            <div :id="`pie-${id}`" style="width:80%;height: 300px;"></div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            basicColors: [
                ['#ABDCFF', '#0396FF'],
                ['#90F7EC', '#32CCBC'],
                ['#FFF6B7', '#F6416C'],
                ['#E2B0FF', '#9F44D3'],
                ['#43CBFF', '#9870CC'],
                ['#FCCF31', '#F55555'],
                ['#F761A1', '#8C1BAB'],
                ['#81FBB8', '#28C76F']
            ],
            option: {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '12%',
                    bottom: '12%',
                    right: '8%',
                    containLabel: true
                },
                legend: {
                    icon: "circle",
                    top: 12,
                    textStyle: {
                        color: '#000'
                    },
                    itemWidth: 12,
                    itemHeight: 10,
                    // itemGap: 35
                },
                xAxis: {
                    type: 'category',
                    data: this.xAxisData,
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#E9E9E9',
                            width: 1 // 这里是为了突出显示加上的
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#000',
                            fontSize: 12
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    max: '1200',
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: '#000'
                        }
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgba(0, 0, 0, 0.15)'
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#000'
                        }
                    }
                },
                series: [{
                    name: '已破解',
                    type: 'bar',
                    barWidth: "5%",
                    itemStyle: {
                        normal: {
                            color: this.genLinearGradient(['#29DCEA', '#036CFC']),
                            barBorderRadius: 8,

                        }
                    },
                    data: this.crackedData
                },
                {
                    name: '未破解',
                    type: 'bar',
                    barWidth: "5%",
                    itemStyle: {
                        normal: {
                            color: this.genLinearGradient(['#F9A89C', '#D83878']),
                            barBorderRadius: 8,
                        }

                    },
                    data: this.unbreakableData
                },
                {
                    name: '取消',
                    type: 'bar',
                    barWidth: "5%",
                    itemStyle: {
                        normal: {
                            color: this.genLinearGradient(['#6DF2C8', '#16A96A']),
                            barBorderRadius: 8,
                        }
                    },
                    data: this.cancellationData
                }, {
                    name: '散列数',
                    type: 'bar',
                    barWidth: "5%",
                    itemStyle: {
                        normal: {
                            color: this.genLinearGradient(['#FFEFB9', '#FFAC0D']),
                            barBorderRadius: 8,
                        }
                    },
                    data: this.hashData
                }]
            }
        }
    },
    props: {
        id: {
            type: String,
            required: true
        },
        title: {
            type: String,
            required: true
        },
        xAxisData: {
            type: Array,
            required: true
        },

        height: {
            type: Number,
            require: true,
        },
        crackedData: {
            type: Array,
            required: true
        },
        unbreakableData: {
            type: Array,
            required: true
        },
        cancellationData: {
            type: Array,
            required: true
        },
        hashData: {
            type: Array,
            required: true
        },
    },
    methods: {
        fnDrawPie() {
            let charts001 = this.$echarts.init(document.getElementById(`pie-${this.id}`));
            charts001.setOption(this.option)
        },
        // 生成渐变色
        genLinearGradient(colors) {
            const color = {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                    {
                        offset: 0,
                        color: colors[0] // 0%处的颜色
                    },
                    {
                        offset: 1,
                        color: colors[1] // 100%处的颜色
                    }
                ],
                global: false
            }
            return color
        }
    },
    mounted() {
    },
    watch: {
        xAxisData(newVal, oldVal) {
            if (newVal) {
                this.option.xAxis.data = newVal;
            }
        },
        crackedData(newVal, oldVal) {
            if (newVal) {
                this.option.series[0].data = newVal;
            }
        },
        unbreakableData(newVal, oldVal) {
            if (newVal) {
                this.option.series[0].data = newVal;
            }
        },
        cancellationData(newVal, oldVal) {
            if (newVal) {
                this.option.series[0].data = newVal;
            }
        },
        hashData(newVal, oldVal) {
            if (newVal) {
                this.option.series[0].data = newVal;
            }
        },
    }
}
</script>
<style lang="less" scoped>
.pieCard {
    width: 100%;
    height: 100%;

    .title {
        display: flex;
        align-items: center;
        padding: 20px;
        padding: 20px;
        font-size: 16px;
        font-weight: 650;

        .topline {
            width: 5px;
            height: 16px;
            margin-right: 10px;
            background-color: #2B8DC8;
        }
    }
}
</style>